import React, {Component, PropTypes} from 'react';
import { connect } from 'react-redux';
var Dialog = require('rc-dialog');

import { setDialog } from '../../reducers/common/actions';

class ComponentBox extends Component {
	constructor(props) {
        super(props);
        this.state = { name:"" };
    }
	render() {
        let dialogTitle = "网址";
        let DialogVisible = this.props.dialog.pagePrevDialogVisible;
        let {hash} = this.props.row;
        let {deployServerDomain,deployFile} = this.props.app.config;
        let url = `${deployServerDomain}/${deployFile}#/page/${hash}`;
        let _url = encodeURIComponent(url)
        let qr_url = `${deployServerDomain}/tool/qrcode.php?content=${_url}`;
		return (
			<Dialog
				wrapClassName={"modalCenter"}
				animation="zoom"
				maskAnimation="fade"
				onClose={::this.onCancelBtnClick}
				visible={DialogVisible}
				title={<div className="modaltitle">{dialogTitle}</div>}
				>
                <div className="form-ctl no-padding">
                    <form className="form-horizontal">
                        <div className="form-group">
                            <label htmlFor="name" className="col-sm-2 control-label">网址</label>
                            <div className="col-sm-10">
                                <input className="form-control" id="name"
                                       placeholder=""
                                       type="text"
                                       value={ url ? url : "" }
                                       onChange={()=>{}}
                                />
                            </div>
                        </div>
                        <div className="form-group">
                            <label htmlFor="name" className="col-sm-2 control-label">二维码</label>
                            <div className="col-sm-10">
                                <img src={qr_url} alt=""/>
                            </div>
                        </div>
                    </form>
                </div>
			</Dialog>
		);
	}
    onCancelBtnClick(){
        this.props.setDialog("pagePrevDialogVisible",false);
    }
}
export default connect(
    state =>{
        return {
            dialog: state.common.dialog,
            row: state.page.row,
            app: state.app
        };
    },
    dispatch => {
        return {
            setDialog: (key,value) => dispatch(setDialog(key,value)),

        }
    }
)(ComponentBox);
